<template>
  <div class="facility">
    <div>{{$t('common.facilityNotice')}}</div>
    <el-table :row-class-name="tableRowClassName" :data="deviceData" style="width: 100%">
      <el-table-column align="center" :label="$t('common.type')" width="150">
        <template slot-scope="scope">{{$t('audit.deviceNum')}}</template>
      </el-table-column>
      <el-table-column align="center" :label="$t('audit.matchPerson')" width="150" prop="realName"></el-table-column>
      <el-table-column align="center" :label="$t('audit.matchingPersonTel')" min-width="150" prop="phone"></el-table-column>
      <el-table-column align="center" :label="$t('common.operation')" width="150">
        <template slot-scope="scope">
          <el-button class="check_exception" @click="goDetail(scope.row)" type="text" size="small">{{$t('common.check')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination @pageChange="pageChange" :page="page"></Pagination>
  </div>
</template>

<script>
  import mixin from '@/service/mixin';
  import Pagination from '@/components/pagination';

  export default {
    name: 'facility',
    components: {
      Pagination
    },
    props: {
      orderId: {
        default: ''
      },
      userId: {
        default: ''
      },
    },
    mixins: [mixin],
    data() {
      return {
        deviceData: [],
      };
    },
    methods: {
      // 获取设备具体信息
      getTableData(page = this.page) {
        const params = {
          userId: this.userId,
          orderId: this.orderId,
          page: {
            pageNo: page.currentPage,
            pageSize: this.page.pageSize
          },
        };
        // 获取不到订单号的情况：暂时由前端控制，后期后端处理 2018-09-17，只能说后端太懒了
        if (this.orderId === '') {
          this.deviceData = [];
        } else {
          this.$api.audit.getOrderDevice(params).then((res) => {
            const { status, data, error } = res;
            this.deviceData = [];
            if (status === '1' && error === '00000000') {
              this.deviceData = data.resultData;
              this.setPage(data.page, this.page);
            }
          });
        }
      },
      goDetail(row) {
        this.$openNewBlank(`#/conf/audit/order-manage/audit-detail/${row.userId}/null/false`);
      },
      tableRowClassName({row, rowIndex}) {
        if (row.showRed && row.showRed !== false) {
          return 'red_color';
        }
        return '';
      },
    },
    created() {
      this.getTableData();
    },
  };
</script>

<style lang="scss" scope>
  .el-table .red_color {
    color: #FF4949;
  }
</style>
